<template>
  <div class="login-container">
    <!-- 登录导航栏 -->
    <van-nav-bar class="page-nav-bar" title="登录">
      <template #left>
        <van-icon @click="$router.back()" color="#fff" name="cross" />
      </template>
    </van-nav-bar>
    <!-- 登录表单区 -->
    <van-form ref="form" @submit="onSubmit">
      <van-field
        v-model="form.mobile"
        name="mobile"
        placeholder="请输入手机号"
        :rules="formRules.mobile"
        type="number"
        maxlength="11"
      >
        <template #left-icon>
          <i class="toutiao toutiao-shouji"></i>
        </template>
      </van-field>
      <van-field
        v-model="form.code"
        name="code"
        placeholder="请输入验证码"
        :rules="formRules.code"
        type="number"
        maxlength="6"
      >
        <!-- 左侧图标 -->
        <template #left-icon>
          <i class="toutiao toutiao-yanzhengma"></i>
        </template>
        <!-- 右侧验证码按钮 -->
        <template #button>
          <van-count-down @finish="isShowCountDown=false" v-if="isShowCountDown" :time="60*1000" format="ss s" />
          <van-button v-else @click="onSendCode" native-type="button" class="send-btn" size="mini">发送验证码</van-button>
        </template>
      </van-field>
      <div class="login-btn">
        <van-button round block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { sendCode, login } from '@/api/user.js'
import { Toast } from 'vant'
// 手机号的正则表达式
const mobileReg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
export default {
  data () {
    return {
      form: {
        mobile: '',
        code: ''
      },
      formRules: {
        mobile: [
          {
            required: true,
            message: '请输入手机号'
          },
          {
            pattern: mobileReg,
            message: '请输入11位正确的手机号'
          }
        ],
        code: [
          {
            required: true,
            message: '请输入验证码'
          },
          {
            pattern: /^[0-9]{6}$/, // 验证码的正则表达式
            message: '请输入6位正确的验证码'
          }
        ]
      },
      isShowCountDown: false // 定义倒计时显示隐藏
    }
  },

  created () {

  },

  methods: {
    // 表单提交
    async onSubmit () {
      Toast.loading({
        message: '登录中...',
        duration: 0, // 持续展示
        forbidClick: true // 会出现一个透明遮罩
      })
      try {
        const res = await login(this.form)
        this.$store.commit('setuser', res)
        Toast.success('登录成功')
        this.$router.push('/')
      } catch (err) {
        if (err.response && err.response.status === 400) {
          return Toast.fail('验证码错误或重新登录')
        }
        Toast.fail('系统异常')
      }
    },

    // 发送验证码
    async onSendCode () {
      // 通过ref获取表单组件
      try {
        await this.$refs.form.validate('mobile')
      } catch (err) {
        return
      }
      Toast.loading({
        message: '发送中...',
        duration: 0, // 持续展示
        forbidClick: true // 会出现一个透明遮罩
      })
      try {
        await sendCode(this.form.mobile)
        Toast('发送成功')
        this.isShowCountDown = true
      } catch (err) {
        if (err.response && err.response.status === 429) {
          return Toast('操作频繁，稍后重试')
        }
        Toast('软件异常')
      }
    }
  }
}
</script>

<style lang='less' scoped>
.login-container{
  .toutiao{
    font-size: 37px;
  }
  .send-btn {
    width: 152px;
    height: 46px;
    background: #EDEDED;
    border-radius: 23px;
    color: #666;
  }
  .login-btn{
    margin: 53px 28px;
    .van-button{
      width: 694px;
      height: 88px;
      background: #6DB4FB;
      border-radius: 10px;
      border: none;
    }
  }
}
</style>
